<template>
    <div>
        <el-card>
            <!-- 新增 -->
            <el-row>
                <el-button type="primary" icon="el-icon-plus"  @click="openDialog">添加</el-button>
            </el-row>
            <el-table :data="apkVersionList" border stripe>
                <el-table-column type="index" label="序号" width="50"> </el-table-column>
                <el-table-column prop="apkVersion" label="版本"></el-table-column>
                <el-table-column prop="apkPath" label="apk路径"></el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="updateDialog(scope.row.id)"></el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="delConfirm(scope.row.id)" ></el-button>
                    </template>
                </el-table-column>
            </el-table>

               <!-- 分页区域 -->
            <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageFrom.current"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageFrom.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageFrom.total">
        </el-pagination>
        </el-card>

        <!-- 添加对话框 -->
        <el-dialog :title="dialogForm.title"
            :visible.sync="dialogForm.visible" width="30%" @close="closeDialog">
             <el-form :model="dialogForm" :rules="formRules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="版本" prop="apkVersion">
                    <el-input v-model="dialogForm.apkVersion"></el-input>
                </el-form-item>
                <el-form-item label="安卓apk路径" prop="apkPath">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        :action="actionUrl"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="reSuccess"
                        :on-change="handleChange"
                        :file-list="addfileList">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return {
          // 分页查询参数对象
          pageFrom: {
            total: 1,
            current: 1,
            size: 10
          },
          dialogForm:{
            visible: false,
            title:"新增",
          },
          formRules:{

          },
          apkVersionList: [],
          listLoading: true,
          apkVersionForm: {
            id:"0",
            apkVersion: '',
            apkPath: ''
          },
          // 上传文件
          addfileList: [],
          fileList: [],
          // 文件上传地址
          actionUrl: ''
        }
    },
    created(){
      this.fetchData(this.pageFrom)
    },
    methods:{
      closeDialog(){
        this.dialogForm.visible = false
      },
      clearForm(){
      },
      onSubmit() {
        if(this.apkVersionForm.id==="0"){

        }else{

        }
        this.dialogForm.visible = false
        this.fetchData(this.pageFrom)
      },
      openDialog(){
        this.dialogForm.visible = true
        this.dialogForm.title = "新增"
      },
      updateDialog(row){
        this.dialogForm.visible = true
        this.dialogForm.title = "修改"


      },
      delConfirm(row){
        console.log(row.id)
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      fetchData(data) {
        this.listLoading = true
      },

      handleSizeChange(val) {
        this.pageFrom.size = val
        this.fetchData(this.pageFrom)
      },
      handleCurrentChange(val) {
        this.pageFrom.current = val
        this.fetchData(this.pageFrom)
      },
      //删除上传文件
      handleRemove(file, fileList) {
        this.dialogForm.apkPath=''
      },
      handlePreview(file) {
        // console.log(file);
      },
      //上传文件让第二次覆盖第一的文件
      handleChange(file,fileList){
        if (fileList.length>0) {
          this.fileList=[fileList[fileList.length-1]]
        }
      },
      reSuccess(response){
        if(response.code == 200){
          this.dialogForm.apkPath = response.data
          this.$message.info('文件加载成功')
        }
      },
    }
}
</script>

